<template>
	<view class="report">
		<!-- S 顶部导航 -->
		<sol-navbar title="举报及屏蔽"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 分类列表 -->
		<view class="report-list">
			<view class="report-list_item" v-for="(item, index) in reportTypeList" :key="item.id"
				:class="{'report-list_item-last':index===reportTypeList.length-1}" @click="fnSelect(index)">
				<sol-radio color="#cccccc" colorChecked="#607d8b" size="36" :name="item.type"
					:value="selectReportItem.type"></sol-radio>
				<text class="report-list_item-text" v-text="item.name">类型名称</text>
			</view>
		</view>
		<!-- E 分类列表 -->

		<!-- S 确认处理 -->
		<view class="report-submit">
			<view class="report-submit_tip">
				精准选择分类有助于快速处理
			</view>
			<button class="report-submit_btn" @click="fnSubmit">确认</button>
			<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Report",
		data() {
			return {
				// 举报类型列表
				reportTypeList: [{
						id: 100,
						name: "广告诈骗",
						type: "advertising_fraud",
					},
					{
						id: 101,
						name: "涉嫌侵权",
						type: " suspect",
					},
					{
						id: 102,
						name: "色情低俗",
						type: "pornographic_vulgarity",
					},
					{
						id: 103,
						name: "违法违规",
						type: "illegal",
					},
					{
						id: 104,
						name: "三观不正",
						type: "three_wrong_view",
					},
					{
						id: 105,
						name: "涉政或谣言",
						type: "politics_rumor",
					},
					{
						id: 106,
						name: "不友善内容",
						type: "unfriendly_content",
					},
				],
				// 选择举报项
				selectReportItem: null
			};
		},
		computed: {},
		methods: {
			// 选择类型
			fnSelect(index) {
				this.selectReportItem = this.reportTypeList[index];
			},
			// 提交举报
			fnSubmit() {
				this.$log(this.$options.name, this.selectReportItem);
			}
		}
	}
</script>

<style lang="scss">
	.report {
		min-height: 100vh;
		background-color: $--color-background;

		&-list {
			margin: 28rpx;
			padding: 28rpx;
			background-color: #474e54;
			border-radius: 28rpx;

			&_item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 28rpx 0;
				border-bottom: 2rpx solid #576069;
			}

			&_item-text {
				margin-left: 28rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #BBBBBB;
			}

			&_item-last {
				border-bottom: none;
			}
		}

		&-submit {
			padding-top: 96rpx;

			&_tip {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
				text-align: center;
				margin-bottom: 28rpx;
			}

			&_btn {
				width: 424rpx;
				height: 94rpx;
				line-height: 94rpx;
				border-radius: 94rpx;
				border: none;
				overflow: hidden;
				padding: 0;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 6rpx;
				background-color: #607d8b !important;
				color: #DDDDDD !important;
			}
		}


	}
</style>
